import * as React from 'react';
import { forwardRef } from 'react';
import StatusBar from '../status-bar/status-bar';
import TitleHeader from '../title-header/title-header';
import DensityDisplay from '../density-display/density-display';
import LineChart from '../line-chart/line-chart';
import './index.scss';

export interface TrafficPredictionProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  /**
   * 状态栏配置
   */
  statusBar?: {
    title?: string;
    subtitle?: string;
  };
  /**
   * 半小时预测标题配置
   */
  halfHourTitle?: {
    title?: string;
  };
  /**
   * 密度显示配置
   */
  densityDisplay?: {
    moduleCount?: number;
    data?: Array<{
      icon?: string;
      label?: string;
      value?: string;
    }>;
  };
  /**
   * 48小时预测标题配置
   */
  fortyEightHourTitle?: {
    title?: string;
  };
  /**
   * 折线图配置
   */
  lineChart?: {
    data?: any[];
    config?: any;
  };

  __designMode?: boolean;
}

const TrafficPrediction = forwardRef<HTMLDivElement, TrafficPredictionProps>(({
  className = '',
  style = {},
  width,
  height,
  noResponsiveScale = true,
  statusBar = {},
  halfHourTitle = {},
  densityDisplay = {},
  fortyEightHourTitle = {},
  lineChart = {},

  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `traffic-prediction ${className}`.trim();
  const customStyle: React.CSSProperties = { ...style, width: '500px', height: '560px' };

  // 只在设计模式下应用宽高属性，避免覆盖CSS缩放
  if (__designMode && width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  if (__designMode && height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  // 构建类名，包含响应式缩放控制
  const finalClassName = [
    combinedClassName,
    noResponsiveScale ? 'no-responsive-scale' : ''
  ].filter(Boolean).join(' ');

  return (
    <div 
      ref={ref} 
      className={finalClassName} 
    >
      {/* 状态栏 */}
      <StatusBar
        chineseText={statusBar.title || "客流预测"}
        englishText={statusBar.subtitle || "TRAFFIC PREDICTION"}
        noResponsiveScale={noResponsiveScale}
      />
      {/* 主要内容区域 */}
      <div className="traffic-prediction-content">
        {/* 半小时预测客流 */}
        <div className="half-hour-section">
          <TitleHeader
            title={halfHourTitle.title || "半小时预测客流"}
            noResponsiveScale={noResponsiveScale}
          />
        </div>
          {/* 密度显示组件 */}
          <div className="density-section">
            <DensityDisplay
              moduleCount={densityDisplay.moduleCount || 4}
              iconWidth={32}
              iconHeight={32}
              padding={10}
              dataItems={[
                { icon: "http://localhost:8085/static/images/chuxingfuwu/编组52.png", label: "铁路", value: 1185 },
                { icon: "http://localhost:8085/static/images/chuxingfuwu/编组25.png", label: "地铁", value: 118755 },
                { icon: "http://localhost:8085/static/images/chuxingfuwu/编组20.png", label: "公交", value: 1185 },
                { icon: "http://localhost:8085/static/images/chuxingfuwu/编组26.png", label: "出租车", value: 1185 }
              ]}
            />
          </div>
          
          {/* 图层位图区域 */}
          <div className="bitmap-section">
            <div className="inbound-outbound">
              <div className="inbound">
                <div className="count">56班</div>
                {/* <div className="label">进</div> */}
                <div className="people">0人</div>
              </div>
              <div className="center-label">半小时</div>
              <div className="outbound">
                <div className="count">14班</div>
                {/* <div className="label">出</div> */}
                <div className="people">0人</div>
              </div>
            </div>
          </div>
        
        {/* 48小时预测客流 */}
        <div className="forty-eight-hour-section">
          <TitleHeader
            title={fortyEightHourTitle.title || "48小时预测客流（昨日.今日）"}
            noResponsiveScale={noResponsiveScale}
          />
          </div>         
          {/* 折线图 */}
          <div className="chart-section">
            <LineChart
                height={180}
                width={500}
              data={lineChart.data || []}
              config={lineChart.config || {}}
              noResponsiveScale={noResponsiveScale}
            />
          </div>
      </div>
    </div>
  );
});

TrafficPrediction.displayName = 'TrafficPrediction';

export default TrafficPrediction; 